<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-demo</title>
    <!--<script src="https://unpkg.com/vue/dist/vue.min.js"></script>-->
    <script src="vue.min.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>

<article id="app6">
    <input type="text" v-model.lazy="message" placeholder="enter some thing">
    <h1>{{message}}</h1>
    <hr>
    <section>
        <input type="radio" v-model="picked2" value="js" id="js">
        <label for="js">js</label>
        <br>
        <input type="radio" v-model="picked2" value="html" id="html">
        <label for="html">html</label>
        <br>
        <input type="radio" v-model="picked2" value="css" id="css">
        <label for="css">css</label>
        <br>
        <h2>选中的是{{picked2}}</h2>
    </section>
    <section>
        <input type="checkbox" v-model="picked" value="js" id="js2">
        <label for="js2">js</label>
        <br>
        <input type="checkbox" v-model="picked" value="html" id="2html">
        <label for="2html">html</label>
        <br>
        <input type="checkbox" v-model="picked" value="css" id="c2ss">
        <label for="c2ss">css</label>
        <br>
        <h2>选中的是{{picked}}</h2>
    </section>
    <section>
        <select v-model="selected" multiple>
            <option >html</option>
            <option value="js">js</option>
            <option >css</option>
        </select>
        <h3>选项:{{selected}}</h3>
    </section>
    <br>
    <section>
        <input type="radio" v-model="pk" :value="value">
        <label >单选按钮</label>
        <p>{{pk}}</p>
        <p>{{value}}</p>
    </section>
</article>
<script>
    const app = new Vue({
        el:'#app6',
        data:{
            message:'',
            picked2:'',
            picked:['js','css'],
            selected:['js','html'],
            pk:false,
            value:123
        }
    })
</script>



<style>
    /*[v-cloak]{*/
        /*display: none;*/
    /*}*/
    /*#app5 h1{*/
        /*margin: 50px;*/
    /*}*/
    /*.table-box{*/
        /*margin: 50px;*/
        /*!*height: 300px;*!*/
        /*!*width: 600px;*!*/
        /*border:1px solid #e9e9e9;*/
        /*border-collapse: collapse;*/
        /*border-spacing: 0;*/
        /*empty-cells: show;*/
    /*}*/
    /*th,td{*/
        /*padding: 8px 16px;*/
        /*border: 1px solid #e9e9e9;*/
        /*text-align: left;*/
    /*}*/
    /*th{*/
        /*background-color: #f7f7f7;*/
        /*color: #5c6b77;*/
        /*font-weight: 600;*/
        /*white-space: nowrap;*/
    /*}*/
    /*!*.table-box tr:nth-child(1){*!*/
        /*!*background: aqua;*!*/
    /*!*}*!*/
    /*!*.table-box tr td:nth-child(1){*!*/
        /*!*width: 10%;*!*/
    /*!*}*!*/
    /*!*.table-box tr td:nth-child(4){*!*/
        /*!*width: 30%;*!*/
    /*!*}*!*/
    /*!*.table-box tr td,.table-box tr th{*!*/
        /*!*border:1px solid #ddd;*!*/
        /*!*text-align: center;*!*/
        /*!*vertical-align: center;*!*/
    /*!*}*!*/
    /*.table-box tr td button{*/
        /*width: 40px;*/
        /*height: 20px;*/
        /*line-height: 20px;*/
        /*font-size: 12px;*/
        /*margin: 0 0px;*/
    /*}*/
    /*input{*/
        /*width: 20px;*/
        /*height: 20px;*/
    /*}*/
</style>
<article id="app5" v-cloak>
    <!--<table class="table-box">-->
        <!--<tr>-->
            <!--<th></th>-->
            <!--<th>商品名称</th>-->
            <!--<th>商品单价</th>-->
            <!--<th>购买数量</th>-->
            <!--<th>操作</th>-->
            <!--<th>-->
                <!--<span>全选</span>-->
                <!--<input type="checkbox" @change="all">-->
            <!--</th>-->
        <!--</tr>-->
        <!--<tr v-for="(item,index) in list">-->
            <!--<td>{{index+1}}</td>-->
            <!--<td>{{item.name}}</td>-->
            <!--<td>{{item.price}}</td>-->
            <!--<td>-->
                <!--<button @click="reduce(index)" :disabled="item.count===1" >-</button>-->
                <!--<span>{{item.count}}</span>-->
                <!--<button @click="increase(index)"  >+</button>-->
            <!--</td>-->
            <!--<td>-->
                <!--<button @click="move(index)">移除</button>-->
            <!--</td>-->
            <!--<td>-->
                <!--<input type="checkbox"  @change="change(index,$event)" :checked="item.isCheck">-->
            <!--</td>-->
        <!--</tr>-->
    <!--</table>-->
    <!--<h1>总价:¥ {{totalPrice}}</h1>-->
</article>

<script>
    // const app = new Vue({
    //     el:'#app5',
    //     data:{
    //         list:[
    //             {
    //                 num:'1',
    //                 name:'iphone7',
    //                 price:'6188',
    //                 count:1,
    //                 action:'移除',
    //                 isCheck:true
    //             },
    //             {
    //                 num:'2',
    //                 name:'iPad Pro',
    //                 price:'5888',
    //                 count:1,
    //                 action:'移除',
    //                 isCheck:false
    //             },
    //             {
    //                 num:'3',
    //                 name:'MacPro',
    //                 price:'21488',
    //                 count:1,
    //                 action:'移除',
    //                 isCheck:false
    //             },
    //         ]
    //     },
    //     methods:{
    //         increase(index){
    //             this.list[index].count++
    //
    //         },
    //         reduce(index){
    //             this.list[index].count--
    //         },
    //         move(index){
    //             this.list.splice(index,1)
    //         },
    //         change(index,e){
    //             const FLAG = this.list[index].isCheck
    //             this.list[index].isCheck = !FLAG
    //         },
    //         all(){
    //             let flag = this.list.every((val)=>val.isCheck===true)
    //             if(flag){
    //                 //全部都选
    //                 this.list.map(val=>val.isCheck=false)
    //             }else {
    //                 // 全都没选
    //                 //部分选
    //                 this.list.map(val=>val.isCheck=true)
    //             }
    //         },
    //     },
    //     computed:{
    //         totalPrice(){
    //             let total = 0
    //             this.list.filter((val)=>{
    //                 if(val.isCheck){
    //                     total += (val.count * val.price)
    //                 }
    //             })
    //             return total.toString().replace(/\B(?=(\d{3)+$)/g,',')
    //         },
    //
    //
    //     }
    // })
</script>


<style>
    /*[v-cloak]{*/
        /*display: none;*/
    /*}*/
    /*.box{*/
        /*display: inline-block;*/
        /*margin: 2px;*/
        /*width: 20px;*/
        /*height: 20px;*/
        /*background-color: deeppink;*/
        /*text-align: center;*/
        /*line-height: 20px;*/
        /*font-size: 8px;*/

    /*}*/
</style>
<article id="app4" v-cloak>
    <!--<h1>{{message}}</h1>-->
    <!--<template v-if="type === 'name'">-->
        <!--<label>用户名：</label>-->
        <!--<input type="text" placeholder="请输入您的名字" key="123">-->
    <!--</template>-->
    <!--<template v-else>-->
        <!--<label>邮箱：</label>-->
        <!--<input type="text" placeholder="请输入您的邮箱" key="222">-->
    <!--</template>-->
    <!--<button @click="toggle($event)">切换如何类型</button>-->
    <!--<hr>-->
    <!--<ul>-->
        <!--<li v-for="(book,index) in books">{{index}}-{{book}}</li>-->
    <!--</ul>-->
    <!--<br>-->
    <!--<section><div v-for="n in 10/2.0" class="box">{{n}}</div></section>-->
    <!--<template v-for="book in filterBooks">-->
        <!--<li>{{book.name}}</li>-->
    <!--</template>-->
</article>
<script>
    // var app = new Vue({
    //     el:'#app4',
    //     data:{
    //         message:'这是一段文本',
    //         type:'name',
    //         books:[{
    //             name:'1234'
    //         },{
    //             name:'666'
    //         }]
    //     },
    //     computed:{
    //       filterBooks(){
    //           return this.books.sort((a,b)=>{
    //               return a.name - b.name > 0
    //           })
    //       }
    //     },
    //     methods:{
    //         toggle(e){
    //             this.type = this.type === 'name'?'email': 'name'
    //             console.log(e)
    //         }
    //     }
    // })
    // app.books.splice(1)
</script>
<article id="app1">
<!--<ul>-->
<!--<li v-for="book in books">{{book.name}}</li>-->
<!--<input type="text" v-model="name" placeholder="你的名字">-->
<!--<h1>你好{{name}}</h1>-->
<!--<h2>{{date}}</h2>-->
<!--</ul>-->
</article>
<article id="app2">
    <!--{{ date | formatDate}}-->
    <!--<h1>总价：{{ prices }}</h1>-->
    <!--<h2>姓名：{{ fullName }}</h2>-->
    <!--<h3>{{ reversedText() }}</h3>-->
</article>
<style>
    .active{
        /*display: flow;*/
        float: left;
        /*top:50px;*/
        height: 200px;
        width: 200px;
        background-color: aqua;
    }
</style>
<article id="app3">
    <!--<div :class="boxStyle"></div>-->
    <!--<h2 :class="[a1,a2]">h2</h2>-->
    <!--<button v-on:click="show">按钮</button>-->
</article>
<script>
    // new Vue({
    //     el:'#app3',
    //     data:{
    //         isActive:true,
    //         a1:'active',
    //         a2:'text-f'
    //     },
    //     methods:{
    //         show(){
    //             this.isActive = !this.isActive
    //             console.log(this.isActive)
    //         }
    //     },
    //     computed:{
    //         boxStyle(){
    //             return {
    //                 active:this.isActive,
    //                 'text-fail':this.isActive
    //             }
    //         }
    //     }
    // })
</script>
<script>
    // var app = new Vue({
    //     el: '#app',
    //     data: {
    //         text:'123,456',
    //         firstName: 'jack',
    //         lastName: 'ripper',
    //         date: new Date(),
    //         packagee1: [{
    //             name: 'iphoneX',
    //             price: 1000,
    //             count: 1
    //         }, {
    //             name: 'iphone7',
    //             price: 1000,
    //             count: 1
    //         }],
    //         packagee2: [{
    //             name: 'iphone4',
    //             price: 1000,
    //             count: 1
    //         }, {
    //             name: 'iphone3',
    //             price: 1000,
    //             count: 1
    //         }]
    //     },
    //     methods:{
    //       reversedText(){
    //           return this.text.split(',').reverse().join(',')
    //       }
    //     },
    //     computed: {
    //         prices() {
    //             let prices = 0
    //             this.packagee1.map(val => {
    //                 prices += val.price * val.count
    //             })
    //             this.packagee2.map(val => {
    //                 prices += val.price * val.count
    //             })
    //             return prices
    //         },
    //         fullName:{
    //             get(){
    //                 return `${this.firstName}${this.lastName}`
    //             },
    //             set(newVal){
    //                 let names = newVal.split(' ')
    //                 this.firstName = names[0]
    //                 this.lastName = names[names.length-1]
    //             }
    //         }
    //
    //     },
    //     filters: {
    //         formatDate(value) {
    //             const date = new Date(value)
    //             const year = date.getFullYear()
    //             const month = (date.getMonth() + 1).toString().padStart(2, '0')
    //             const day = (+date.getDate()).toString().padStart(2, '0')
    //             const hours = date.getHours().toString().padStart(2, '0')
    //             const minutes = date.getMinutes().toString().padStart(2, '0')
    //             const second = date.getSeconds().toString().padStart(2, '0')
    //             return `${year}-${month}-${day}-${hours}-${minutes}-${second}`
    //         }
    //     },
    //     mounted() {
    //         this.timer = setInterval(() => {
    //             this.date = new Date()
    //             console.log(this.$data.date.getSeconds())
    //         }, 1000)
    //     },
    //     beforeDestroy() {
    //         this.timer && clearInterval(this.timer)
    //     }
    // })
    // app.fullName = 'jon dan'
</script>
<script>
    // const app =  new Vue({
    //      el:'#app',
    //      data:{
    //          books:[
    //              {name:'vue实战'},
    //              {name:'vue实战2'},
    //              {name:'vue实战3'}
    //          ],
    //          name:'',
    //          a:2,
    //          date:new Date().getSeconds()
    //      },
    //      created(){
    //          // console.log(2)
    //      },
    //      mounted(){
    //          // console.log(this.$el)
    //          this.timer = setInterval(()=>{
    //              this.date = new Date().getSeconds()
    //          },1000)
    //      },
    //      beforeDestroy(){
    //        this.timer && clearInterval(this.timer)
    //      }
    //  })
    // console.log(app.$el)
</script>
</body>
</html>